<template>
  <view>

    <view style="position: fixed;left: 0;width: 100%; top:0;z-index: 1;">

      <view class="header gui-border-b gui-border-box gui-bg-gray">
        <gui-switch-navigation :size="180" :currentIndex="currentIndex" :items="tabs" activeDirection="center"
          textAlign="center" @change="getOrder"></gui-switch-navigation>
      </view>
    </view>

    <view>
      <bar></bar>
      <view style="height: 180rpx;">

      </view>

    </view>



    <view class="gui-order gui-bg-white gui-dark-bg-level-3" v-if="items != null" v-for="(order, oIndex) in items"
      :key="oIndex">
      <view class="gui-flex gui-row gui-space-between gui-align-items-center">
        <text class="gui-order-number gui-primary-text">订单号 : {{order.id}}</text>
        <text class="gui-icons gui-text-small gui-color-gray" v-if="order.status==-1">订单已取消</text>
        <text class="gui-icons gui-text-small gui-color-red" @tap="removeorder(order)"
          v-else-if="order.status==1">&#xe632;
          取消订单</text>
        <text class="gui-icons gui-text-small gui-color-green" v-else-if="order.status==2"> 已完成</text>
      </view>
      <!-- 循环展示订单 -->
      <view>
        <text class="gui-shop gui-primary-text gui-block">{{}}</text>
        <!-- 循环订单商品 -->
        <view class="gui-order-goods gui-flex">

          <text class="gui-order-goods-name gui-secondary-text">{{order.zhuoNum}}桌</text>

          <text class="gui-order-goods-price">{{order.shopType}}</text>
        </view>

        <view class="gui-order-goods gui-flex">

          <text class="gui-order-goods-name gui-secondary-text">{{order.caiNum}}个菜</text>

          <text class="gui-order-goods-price">{{order.renNum}}人/桌</text>
        </view>
        <view class="gui-order-goods gui-flex">

          <text class="gui-order-goods-name gui-secondary-text">负责人：{{order.contact}}</text>
          <text class="gui-order-goods-price">{{order.phone}}</text>
        </view>
        <view class="gui-order-goods gui-flex">
          <text class="gui-order-goods-name gui-secondary-text">{{order.city}} {{order.address}}</text>
        </view>
      </view>
      <!-- 订单底部 -->
      <view class="gui-order-footer gui-flex gui-row gui-space-between">
        <text v-if="order.status==-1"></text>
        <text class="gui-order-number gui-color-blue" v-else>预约成功</text>
        <view>
          <text class="gui-order-number">{{order.orderTime}} 入场</text>
        </view>

      </view>
    </view>


  </view>
</template>

<script>
  export default {

    data() {
      return {
        tabs: [{
            id: 0,
            name: '全部订单'
          }, {
            id: 1,
            name: '待服务'
          },
          {
            id: 2,
            name: '服务完成'
          }
        ],
        // 选中选项的 索引
        currentIndex: 0,
        items: [{
          orderNumber: '001'
        }, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, ],
        userInfo: '',
      }
    },
    onLoad() {
      var user = uni.gRequest.checkLogin();
      console.log("user:", user)
      if (user) {
        this.userInfo = user;
      }
      this.getOrder();
    },
    methods: {
      getOrder(index) {
        // console.log(index);
        this.currentIndex = index;
        uni.gRequest.get('order/list', {
          userId: this.userInfo.userId,
          [index ? 'status' : 'null']: index ? index : 'null'
        }).then(result => {
          // console.log(result.rows)
          this.items = result.rows
        });
      },
      removeorder(order) {
        uni.showModal({
          title: '温馨提醒',
          content: "是否确定取消订单",
          showCancel: true,
          cancelText: '取消',
          confirmText: '确定',
          success: res => {
            if (res.confirm) {
              uni.gRequest.get('order/cancel', {
                id: order.id
              }).then(result => {
                uni.showToast({
                  title: '取消成功'
                });
                this.getOrder();
              });
            }

          },
        })
      },
      orderPush() {
        uni.navigateTo({
          url: '/pages/order/add'
        })
      }

    }
  }
</script>

<style scoped>
  .header {
    padding: 15rpx 30rpx;
    height: 100rpx;
  }

  .gui-order {
    padding: 25rpx;
    margin: 25rpx;
    margin-bottom: 0rpx;
    border-radius: 10rpx;
  }

  .gui-order-number {
    line-height: 50rpx;
    font-size: 26rpx;
    width: 300rpx;
    flex: 1;
  }

  .gui-shop {
    line-height: 88rpx;
    font-size: 28rpx;
    font-weight: bold;
  }

  .gui-order-goods {
    flex-direction: row;
    flex-wrap: nowrap;
    padding-bottom: 20rpx;
    align-items: flex-start;
  }

  .gui-order-goods-img {
    width: 100rpx;
    height: 100rpx;
  }

  .gui-order-goods-name {
    line-height: 40rpx;
    width: 200rpx;
    flex: 1;
    overflow: hidden;
    font-size: 26rpx;

  }

  .gui-order-goods-price {
    font-size: 24rpx;
    line-height: 50rpx;
    width: 150rpx;
    text-align: right;
  }

  .gui-order-footer {
    margin-top: 2px;
  }

  .gui-order-status {
    line-height: 50rpx;
    font-size: 26rpx;
    width: 100rpx;
    text-align: center;
  }

  .gui-order-btn {
    width: 150rpx;
    height: 50rpx;
    line-height: 50rpx;
    font-size: 22rpx;
    text-align: center;
    border-radius: 60rpx;
    margin-left: 20rpx;
  }

  .gui-order-btn-red {
    border-color: #FF0036;
    color: #FF0036;
  }

  .gui-empty-icon {
    font-size: 130rpx;
    line-height: 130rpx;
    margin-top: 200rpx;
  }
</style>
